<template>
  <game-model @close="close">
    <div class="shovel_grass_content">
      <div class="title">
        <!-- 获取道具 -->
        <template v-if="bags.gameProps">
          <p class="img_words"><img src="../../../../images/prize_words.png" alt=""></p>
          <p>获得{{propsNum}}把铲子</p>
        </template>
        <!-- 获取电子劵 -->
        <template v-else-if="bags.coupon">
          <p class="img_words"><img src="../../../../images/prize_coupon.png" alt=""></p>
          <p>获得商券{{couponNum}}张</p>
        </template>
        <!-- 获取芸券 -->
        <template v-else-if="bags.yun">
          <p class="img_words"><img src="../../../../images/prize_yun.png" alt=""></p>
          <p>挖到芸券啦！</p>
        </template>
        <template v-else>
          <p class="img_words"><img src="../../../../images/prize_null.png" alt=""></p>
          <p class="sub_img"><img src="../../../../images/cloud.png" alt=""></p>
        </template>
      </div>
      <div class="prize">
        <!-- 道具 -->
        <template v-if="bags.gameProps">
          <div class="propsImg">
            <img src="../../../../images/prize_shovel.png" alt="">
          </div>
          <div class="prize_shadow"></div>
        </template>
        <!-- 电子劵 -->
        <template v-else-if="bags.coupon">
          <coupon :coupons="coupons"></coupon>
          <div class="coupon_shadow"></div>
          <!-- <ul class="decorate">
            <li><img src="../../../images/shovel.png" alt=""></li>
            <li><img src="../../../images/shovel.png" alt=""></li>
            <li><img src="../../../images/shovel.png" alt=""></li>
          </ul> -->
        </template>
        <template v-else-if="bags.yun">
          <p class="yunNum">{{yunMoney}}</p>
          <p class="yunWords">芸券</p>
          <!-- <p class="decorate"><img src="../../../images/shovel.png" alt=""></p> -->
        </template>
        <!-- <template v-else>
          <p class="decorate"><img src="../../../images/shovel.png" alt=""></p>
        </template> -->
      </div>
      <div class="btn">
        <button type="button" name="button" v-if="bags.gameProps" @click="goOn">继续挖宝</button>
        <button type="button" name="button" v-else-if="bags.yun" @click="goOn">放入芸券，继续游戏</button>
        <button type="button" name="button" v-else-if="bags.coupon" @click="goOn">放入商券，继续游戏</button>
        <button type="button" name="button" v-else @click="goOn">继续游戏</button>
      </div>
    </div>
  </game-model>
</template>

<script>
import GameModel from '../model.vue'
import Coupon from '../coupon.vue'
export default {
  name: 'bag-modal',
  components: {GameModel, Coupon},
  data: () => ({
    bags: {
      gameProps: false,
      coupon: false,
      yun: true
    }
  }),
  props: {
    list: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    coupons() {
      let list = this.list.couponSearch
      list.forEach(item => {
        item.num = this.list.firstPackage.couponNum
      })
      return list
    },
    propsNum() {
      return this.list.firstPackage.propNum
    },
    couponNum() {
      return this.list.firstPackage.couponNum
    },
    yunMoney() {
      return this.list.firstPackage.yun
    }
  },
  methods: {
    goOn() {
      this.$emit('go-on')
    },
    close() {
      this.$emit('close');
    }
  }
}
</script>

<style lang="scss" scoped>
  .shovel_grass_content {
    margin: 30% auto 0;
    border-radius: .4rem;
    background-color: rgba(35,34,42,0.97);
    padding: 2rem 0;
    font-size: 1rem;
  }
  .title {
    width: 60%;
    margin: auto;
    color: #f98a8a;
    text-align: center;
    .img_words img {
      max-width: 100%;
    }
    .img_words {
      margin-bottom: 1rem;
    }
  }
  .prize {
    width: 90%;
    margin: 2rem auto 0;
    // text-align: center;
    padding-bottom: 1rem;
    .propsImg {
      text-align: center;
    }
    img {
      max-width: 60%;
    }
  }
  .btn {
    width: 80%;
    margin:auto;
    button {
      width: 100%;
      padding: 0.6rem 0;
      outline: none;
      font-size: 1rem;
      border-radius: 0.2rem;
      background-color: #ec4e8a;
      color: #fff;
    }
  }
  .prize_shadow {
    width: 6rem;
    height: 0rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    margin: auto;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 100;
    margin-top: 1.4rem;
    margin-bottom: 3.6rem;
  }
  .coupon_shadow {
    display: block;
    content: '';
    width: 100%;
    height: 1rem;
    border-top-left-radius: 8rem 0.7rem;
    border-top-right-radius: 8rem 0.7rem;
    border-bottom-right-radius: 8rem 0.7rem;
    border-bottom-left-radius: 8rem 0.7rem;
    box-shadow: 0 0.7rem 0.7rem rgba(0,0,0,0.5);
    margin-top: -1rem;
    position: relative;
    z-index: 100;
    margin-bottom: 2rem;
  }
  .decorate {
    width: 30%;
    margin: auto;
    overflow: hidden;
    text-align: center;
    li {
      float: left;
      width: 30%;
      margin: 1rem 1.6%;
      img {
        max-width: 100%;
      }
    }
    img {
      max-width: 30%;
      margin: auto;
    }
  }
  .yunNum,.yunWords {
    color: #f98a8a;
    text-align: center;
  }
  .yunNum {
    font-size: 8rem;
    background-image: url('../../../../images/prize_yunGroud.png');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center 1rem;
  }
  .yunWords {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
  .sub_img {
    img {
      max-width: 70%;
    }
  }
</style>
